import { useState } from 'react'
import { Button, Empty, ActionSheet, Tabs, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './list.less'

export default function ShopListPage() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('all')

  const handleAddShop = () => {
    const handler = ActionSheet.show({
      actions: [
        { text: '抖音', key: 'douyin' },
        { text: '快手', key: 'kuaishou' },
      ],
      cancelText: '取消',
      onAction: (action) => {
        handler.close()
        if (action.key === 'douyin') {
          navigate('/shops/add?platform=douyin')
        } else if (action.key === 'kuaishou') {
          navigate('/shops/add?platform=kuaishou')
        }
      },
    })
  }

  const handleTabChange = (key: string) => {
    setActiveTab(key)
  }

  const handleDeleteAuth = () => {
    Toast.show({ content: '删除授权成功' })
  }

  return (
    <div className="shop-list-page">
      <div className="shop-list-header">
        <div className="title">店铺列表</div>
        <Button size='small' color='primary' onClick={handleAddShop}>添加店铺</Button>
      </div>
      
      <div className="shop-filter">
        <Tabs activeKey={activeTab} onChange={handleTabChange}>
          <Tabs.Tab title='全部' key='all' />
          <Tabs.Tab title='快手' key='kuaishou' />
          <Tabs.Tab title='抖音' key='douyin' />
        </Tabs>
      </div>

      <div className="shop-content">
        <Empty description='暂无店铺' />
      </div>

      <div className="shop-bottom">
        <Button color='danger' fill='outline' onClick={handleDeleteAuth}>删除授权</Button>
      </div>
    </div>
  )
}
